<template>
  <div class="box">
    <div class="header">
      <div class="header-left">
        <van-icon name="arrow-left" size="25" @click="onClickLeft" />
      </div>
      <div class="header-search" @click="jumpSearch">
        <van-search
          v-model="searchText"
          placeholder="请输入搜索关键词"
          shape="round"
          input-align="center"
        />
      </div>
      <div class="header-right">
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
          theme="dark"
        >
          <template #reference>
            <van-icon name="ellipsis" size="25" />
          </template>
        </van-popover>
        
      </div>
    </div>
    <van-divider :style="{ margin: 0 }" />
    <div class="main">
      <div class="box-kind">
        <div class="box-left">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              v-for="(item, index) in categorylist"
              :key="index"
              :title="item"
              @click="getClickactgory(item)"
            />
          </van-sidebar>
        </div>
        <div class="box-right">
          <van-grid :column-num="3">
            <van-grid-item
              v-for="(item, index) in categoryPro"
              :key="index"
              icon="goods-collect-o"
              :text="item.brand"
              @click="jutiPro(item.brand)"
            />
          </van-grid>
        </div>
      </div>

      <!-- 显示分享面板 -->
      <div class="share">
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelectShare"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Sidebar,
  SidebarItem,
  Grid,
  GridItem,
  Divider,
  Icon,
  Search,
  Popover,
  ShareSheet
} from "vant";
import { Image as VanImage } from "vant";
import { getCategorylist, getBrandlist } from "../api/kind";

Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Icon);
Vue.use(Search);
Vue.use(Popover);
Vue.use(ShareSheet);

export default {
  name: "Kind",
  created() {
    // 进入页面就请求产品分类列表
    getCategorylist().then((res) => {
      if (res.data.code == "200") {
        this.categorylist = res.data.data;
        // 进入页面也进行一次产品分类品牌请求
        this.category = this.categorylist[this.activeKey];
        this.comGetBrandlist(this.categorylist[this.activeKey]);
      }
    });
  },
  components: {},
  data() {
    return {
      activeKey: 0,
      categorylist: [],
      categoryPro: [],
      searchText: "",
      showPopover: false,
      showShare: false,
      category:'',
      actions: [
        { text: "首页", icon: "wap-home", index: 0 },
        { text: "分享", icon: "share", index: 1 },
      ],
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  methods: {
    getClickactgory(category) {
      // 点谁获取谁的产品分类信息
      this.category = category
      this.comGetBrandlist(category);
    },
    comGetBrandlist(category) {
      getBrandlist({ category }).then((res) => {
        if (res.data.code == "200") {
          this.categoryPro = res.data.data;
        }
      });
    },
    onClickLeft() {
      this.$router.back();
    },
    onSelect(action) {
      console.log(action.index);
      switch (action.index) {
        case 0:
          this.$router.back();
          break;
        case 1:
          this.showShare = true;
          break;
        default:
          break;
      }
    },
    onSelectShare(option) {
      console.log(option.name);
      this.showShare = false;
    },
    jumpSearch(){
      this.$router.push('/kind/search');
    },
    jutiPro(brand){
      let params = {
        category:this.category,
        brand:brand
      }
      this.$router.push({
        path:'/kind/search/ksearchlsit',
        query:{params}
      })
      // getBrandprolist(params).then((res)=>{
      //   console.log(res);
      //   if(res.data.code == '200'){
      //     this.proList = res.data.data
      //     console.log(this.proList);
      //   }
      // })
    }
  },
};
</script>
<style >
/* 头部样式 */
.header {
  background-color: #fff;
  align-items: center;
  display: flex;
justify-content: space-around;
}
.van-search {
  width: 3rem;
}
/* 下面是主题样式 */
.box-kind {
  display: flex;
  height: 100%;
}
.box-left {
  width: 0.8rem;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.box-right {
  flex: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
}
.van-grid {
  flex: 1;
}
</style>





          
